<template>
	<view class="content">
		<view class="status"></view>
		<!-- header -->
		<Header></Header>
		<!-- swiper -->
		<swiper class="ds-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true" @tap="closeMenu()">
			<swiper-item v-for="(item, index) in swiperList" :key="index">
				<image class="ds-swiper-img" :src="item.src" mode=""></image>
			</swiper-item>
		</swiper>
		<!-- article -->
		<view class="article" @tap="goService()">
			<text class="article-title">{{article.title}}</text>
			<text space="nbsp" class="article-content">{{article.content}}</text>
		</view>
		<!-- swiper2 -->
		<swiper class="service" :indicator-dots="false" :autoplay="false" circular="true" :current="currentService" @change="changeCurrent" @tap="closeMenu()">
			<swiper-item class="service-box">
				<view class="box" 
				v-for="(item, index) in serviceList1" 
				:key="index"
				:style="'background-image: url(' + item.src + ');'"
				style="background-repeat: no-repeat; background-size: 100% 100%;"
				>
					<text class="service-title">{{item.title}}</text>
				</view>
			</swiper-item>
			<swiper-item class="service-box">
				<view class="box" 
				v-for="(item, index) in serviceList2" 
				:key="index"
				:style="'background-image: url(' + item.src + ');'"
				style="background-repeat: no-repeat; background-size: 100% 100%;"
				>
					<text class="service-title">{{item.title}}</text>
				</view>
			</swiper-item>
			<swiper-item class="service-box">
				<view class="box" 
				v-for="(item, index) in serviceList3" 
				:key="index"
				:style="'background-image: url(' + item.src + ');'"
				style="background-repeat: no-repeat; background-size: 100% 100%;"
				>
					<text class="service-title">{{item.title}}</text>
				</view>
			</swiper-item>
		</swiper>
		<!-- dots -->
		<view class="dots" @tap="closeMenu()">
			<view>
				<text class="cuIcon-title" :class="currentService==0?'dots-selected':''"></text>
			</view>
			<view>
				<text class="cuIcon-title" :class="currentService==1?'dots-selected':''"></text>
			</view>
			<view>
				<text class="cuIcon-title" :class="currentService==2?'dots-selected':''"></text>
			</view>
		</view>
		<!-- case-bos -->
		<view class="case" @tap="goCase()">
			<view class="case-title">
				客户案例
			</view>
			<view class="boxs" >
				<view class="case-box" v-for="(item, index) in caseList" :key="index">
					<image class="case-img" :src="item.src" mode=""></image>
					<text class="case-con">{{item.title}}</text>
				</view>
			</view>
			<text space="nbsp" class="case-article">
				{{caseArticle}}
			</text>
		</view>
		<image class="mid-image" src="http://wap.lzdianshi.com/Upload/1511156787.jpg" mode=""></image>
		<view class="news"
		style="background-image: url(http://wap.lzdianshi.com/Upload/1510991430.jpg);background-repeat: no-repeat; background-size: 100% 100%;"
		@tap="goNews()">
			新闻资讯
		</view>
		<!-- works -->
		<swiper class="works-swiper" :indicator-dots="false" :autoplay="false" circular="true" :current="currentWork" @change="changeWork" @tap="goNews()">
			<swiper-item class="works-box">
				<view class="work-item" v-for="(item, index) in workList1" :key="index">
					<image class="work-img" :src="item.src" mode=""></image>
					<view class="work-time">
						{{item.time}}
					</view>
					<view class="work-title">
						{{item.title}}
					</view>
					<view class="work-content">
						　　{{item.text}}
					</view>
				</view>
			</swiper-item>
			<swiper-item class="works-box">
				<view class="work-item" v-for="(item, index) in workList2" :key="index">
					<image class="work-img" :src="item.src" mode=""></image>
					<view class="work-time">
						{{item.time}}
					</view>
					<view class="work-title">
						{{item.title}}
					</view>
					<view class="work-content">
						　　{{item.text}}
					</view>
				</view>
			</swiper-item><swiper-item class="works-box">
				<view class="work-item" v-for="(item, index) in workList3" :key="index">
					<image class="work-img" :src="item.src" mode=""></image>
					<view class="work-time">
						{{item.time}}
					</view>
					<view class="work-title">
						{{item.title}}
					</view>
					<view class="work-content">
						　　{{item.text}}
					</view>
				</view>
			</swiper-item>
		</swiper>
		<!-- dots -->
		<view class="dots" @tap="closeMenu()">
			<view>
				<text class="cuIcon-title" :class="currentWork==0?'dots-selected':''"></text>
			</view>
			<view>
				<text class="cuIcon-title" :class="currentWork==1?'dots-selected':''"></text>
			</view>
			<view>
				<text class="cuIcon-title" :class="currentWork==2?'dots-selected':''"></text>
			</view>
		</view>
		<!-- pictureShow -->
		<view class="picture">
			<view 
			class="pic-item"
			style="background-image: url(http://wap.lzdianshi.com/Upload/1511149451.jpg); background-repeat: no-repeat; background-size: 100% 100%;"
			@tap="goCase()">
				其他客户
			</view>
			<view
			class="pic-item"
			style="background-image: url(http://wap.lzdianshi.com/Upload/1518224662.jpg); background-repeat: no-repeat; background-size: 100% 100%;"
			@tap="closeMenu()">
				发展历程
			</view>
		</view>
		<!-- footer -->
		<Footer @tap="closeMenu()"></Footer>
		<!-- Sidebar -->
		<Sidebar></Sidebar>
		<!-- Bottom -->
		<view class="last"></view>
		<Bottom></Bottom>
	</view>
</template>

<script>
	import Header from '../../components/Header/index.vue';
	import Bottom from '../../components/Bottom/index.vue';
	import Footer from '../../components/Footer/index.vue';
	import Sidebar from '../../components/Sidebar/index.vue'
	export default {
		components:{
			Header,
			Bottom,
			Footer,
			Sidebar,
		},
		data() {
			return {
				swiperList:[],
				article:{
					'title': '打造世界知名品牌  成就国际优秀企业',
					'content': '     兰州点石网络科技有限公司作为一家以网站建设、软件开发、计算机信息系统集成、网络工程建设为主的高新技术企业，主要核心业务有：站群系统、OA办公软件、实训软件、安全产品、项目申报系统、智能会议系统，致力于为政府、教育、医疗、环保等行业提供信息化解决方案。'
				},
				serviceList1:[],
				serviceList2:[],
				serviceList3:[],
				currentService: 0,
				caseList: [],
				caseArticle:'    在经济全球化和“一带一路”战略实施大背景下，集团以开放、包容、合作、共赢的发展理念，看着世界地图做企业，沿着一带一路走出去，加快打造全球化运营的国际化公司。',
				workList1:[],
				workList2:[],
				workList3:[],
				currentWork: 0,
			}
		},
		onLoad() {
			this.swiperList = this.$store.state.swiperList;
			this.serviceList1 = this.$store.state.serviceList1;
			this.serviceList2 = this.$store.state.serviceList2;
			this.serviceList3 = this.$store.state.serviceList3;
			this.caseList = this.$store.state.caseList;
			this.workList1 = this.$store.state.workList1;
			this.workList2 = this.$store.state.workList2;
			this.workList3 = this.$store.state.workList3;
		},
		methods: {
			closeMenu(){
				this.$store.commit('SHOWMENU', false);
			},
			changeCurrent(e){
				this.currentService = e.detail.current
			},
			changeWork(e){
				this.currentWork = e.detail.current
			},
			goCase(){
				this.closeMenu();
				uni.navigateTo({
					url: '../case/case'
				})
			},
			goService(){
				this.closeMenu();
				uni.navigateTo({
					url: '../service/service'
				})
			},
			goNews(){
				this.closeMenu();
				uni.navigateTo({
					url: '../news/news'
				})
			},
		}
	}
</script>

<style>
	@import url("./index.css");
</style>
